<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- SEO Meta Tags -->
    <title>使用帮助 - Linux.do 数据分析工具 | 详细使用指南</title>
    <meta name="description" content="Linux.do 数据分析工具完整使用指南，包含数据导出、上传分析、功能介绍等详细教程。学会如何获取和分析您的论坛活动数据。">
    <meta name="keywords" content="Linux.do使用教程,数据分析指南,论坛数据导出,使用帮助,操作说明,数据可视化教程">
    <meta name="author" content="Linux.do Community">
    <meta name="robots" content="index, follow">

    <!-- Open Graph -->
    <meta property="og:type" content="article">
    <meta property="og:title" content="使用帮助 - Linux.do 数据分析工具">
    <meta property="og:description" content="详细的使用指南，教您如何使用 Linux.do 数据分析工具">
    <meta property="og:site_name" content="Linux.do Analyzer">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="使用帮助 - Linux.do 数据分析工具">
    <meta name="twitter:description" content="详细的使用指南和操作教程">

    <!-- TailwindCSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- FontAwesome -->
  <!-- FontAwesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
    integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/js/fontawesome.min.js"
    integrity="sha512-obFNtQ1JKCrxPBPLmYDUevlriATl5EhvwU3CFtdW/HKOkeAe0bbsyZfHO44/f1QyndrZJ464TQvrRP9ZjyXSSA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/style.css">

    <!-- 添加动画样式 -->
    <style>
        /* 淡入动画 */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes fadeInLeft {
            from { opacity: 0; transform: translateX(-30px); }
            to { opacity: 1; transform: translateX(0); }
        }

        @keyframes fadeInRight {
            from { opacity: 0; transform: translateX(30px); }
            to { opacity: 1; transform: translateX(0); }
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.4); }
            50% { box-shadow: 0 0 40px rgba(99, 102, 241, 0.6); }
        }

        .animate-fade-in-up { animation: fadeInUp 0.8s ease-out; }
        .animate-fade-in-left { animation: fadeInLeft 0.8s ease-out; }
        .animate-fade-in-right { animation: fadeInRight 0.8s ease-out; }
        .animate-float { animation: float 3s ease-in-out infinite; }
        .animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }

        /* 卡片悬停效果 */
        .card-hover {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .card-hover:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }

        /* 渐变背景 */
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* 按钮效果 */
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
        }

        /* 滚动动画 */
        .scroll-reveal {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.6s ease;
        }

        .scroll-reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body class="min-h-screen" style="background: var(--background-gradient)">

    <!-- Navigation -->
    <nav class="sticky top-0 z-50 backdrop-blur-md border-b" style="background: var(--card-bg); border-color: var(--border-color);">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center space-x-4">
                    <a href="index.html" class="flex items-center space-x-2 text-xl font-bold" style="color: var(--primary-color);">
                        <span>📊</span>
                        <span>Linux.do 数据分析</span>
                    </a>
                </div>

                <!-- 桌面端导航 -->
                <div class="hidden md:flex items-center space-x-6">
                    <a href="index.html" class="nav-link transition-colors hover:opacity-75" style="color: var(--text-color);">
                        数据分析
                    </a>
                    <a href="help.html" class="nav-link current transition-colors" style="color: var(--primary-color); font-weight: 600;">
                        使用帮助
                    </a>
                    <a href="about.html" class="nav-link transition-colors hover:opacity-75" style="color: var(--text-color);">
                        关于我们
                    </a>
                    <a href="faq.html" class="nav-link transition-colors hover:opacity-75" style="color: var(--text-color);">
                        常见问题
                    </a>
                    <a href="privacy.html" class="nav-link transition-colors hover:opacity-75" style="color: var(--text-color);">
                        隐私政策
                    </a>

                    <!-- GitHub 链接 -->
                    <a href="https://github.com/dext7r/linux-do-analyzer"
                       target="_blank"
                       class="hidden lg:flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-all hover:scale-105"
                       style="background: var(--card-bg); color: var(--text-color); border: 1px solid var(--border-color);">
                        <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
                             alt="GitHub" class="w-4 h-4 mr-2 opacity-70">
                        GitHub
                    </a>

                    <!-- 主题切换器 -->
                    <div class="relative">
                        <select id="themeSelector" class="appearance-none rounded-lg px-3 py-2 text-sm border focus:outline-none focus:ring-2 transition-all"
                                style="background: var(--card-bg); color: var(--text-color); border-color: var(--border-color); --tw-ring-color: var(--primary-color);">
                            <option value="apple">简洁</option>
                            <option value="xiaomi">现代</option>
                            <option value="huawei">商务</option>
                        </select>
                    </div>
                </div>

                <!-- 移动端菜单按钮 -->
                <div class="md:hidden">
                    <button id="mobileMenuBtn" class="flex items-center justify-center w-10 h-10 rounded-lg transition-all duration-200"
                            style="background: var(--card-bg); border: 1px solid var(--border-color);">
                        <i class="fas fa-bars" style="color: var(--text-color);"></i>
                    </button>
                </div>
            </div>

            <!-- 移动端菜单 -->
            <div id="mobileMenu" class="md:hidden hidden">
                <div class="px-2 pt-2 pb-3 space-y-1 border-t" style="border-color: var(--border-color);">
                    <a href="index.html" class="block px-3 py-2 rounded-md text-base font-medium transition-colors hover:bg-gray-100" style="color: var(--text-color);">
                        数据分析
                    </a>
                    <a href="help.html" class="block px-3 py-2 rounded-md text-base font-medium transition-colors" style="color: var(--primary-color); background: var(--primary-color); background-opacity: 0.1;">
                        使用帮助
                    </a>
                    <a href="about.html" class="block px-3 py-2 rounded-md text-base font-medium transition-colors hover:bg-gray-100" style="color: var(--text-color);">
                        关于我们
                    </a>
                    <a href="faq.html" class="block px-3 py-2 rounded-md text-base font-medium transition-colors hover:bg-gray-100" style="color: var(--text-color);">
                        常见问题
                    </a>
                    <a href="privacy.html" class="block px-3 py-2 rounded-md text-base font-medium transition-colors hover:bg-gray-100" style="color: var(--text-color);">
                        隐私政策
                    </a>

                    <!-- 移动端工具 -->
                    <div class="pt-3 border-t" style="border-color: var(--border-color);">
                        <div class="flex items-center justify-between px-3 py-2">
                            <span class="text-sm font-medium" style="color: var(--text-color);">主题</span>
                            <select id="mobileThemeSelector" class="appearance-none rounded px-2 py-1 text-sm border focus:outline-none"
                                    style="background: var(--card-bg); color: var(--text-color); border-color: var(--border-color);">
                                <option value="apple">简洁</option>
                                <option value="xiaomi">现代</option>
                                <option value="huawei">商务</option>
                            </select>
                        </div>
                        <a href="https://github.com/dext7r/linux-do-analyzer" target="_blank"
                           class="flex items-center px-3 py-2 rounded-md text-base font-medium transition-colors hover:bg-gray-100" style="color: var(--text-color);">
                            <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
                                 alt="GitHub" class="w-5 h-5 mr-2 opacity-70">
                            GitHub 源码
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <div class="container mx-auto px-4 py-8 max-w-7xl">

        <!-- Hero Header -->
        <header class="text-center mb-16 animate-fade-in-up">
            <div class="relative p-12 rounded-3xl shadow-2xl overflow-hidden card-hover" style="background: var(--card-bg); border: 1px solid var(--border-color);">
                <!-- 背景装饰 -->
                <div class="absolute inset-0 bg-gradient-to-br from-indigo-50/30 via-purple-50/20 to-pink-50/30"></div>

                <!-- 动态粒子背景 -->
                <div class="absolute inset-0 overflow-hidden">
                    <div class="absolute top-10 left-10 w-2 h-2 bg-indigo-400 rounded-full animate-float opacity-60"></div>
                    <div class="absolute top-20 right-20 w-3 h-3 bg-purple-400 rounded-full animate-float opacity-40" style="animation-delay: 1s;"></div>
                    <div class="absolute bottom-20 left-20 w-2 h-2 bg-pink-400 rounded-full animate-float opacity-50" style="animation-delay: 2s;"></div>
                    <div class="absolute bottom-10 right-10 w-1.5 h-1.5 bg-indigo-300 rounded-full animate-float opacity-70" style="animation-delay: 0.5s;"></div>
                </div>

                <div class="relative z-10">
                    <!-- 现代化图标设计 -->
                    <div class="relative mb-8">
                        <div class="w-28 h-28 mx-auto bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-600 rounded-3xl flex items-center justify-center shadow-2xl animate-pulse-glow">
                            <i class="fas fa-graduation-cap text-white text-4xl"></i>
                        </div>
                        <!-- 装饰性徽章 -->
                        <div class="absolute -top-3 -right-3 w-10 h-10 bg-gradient-to-r from-green-400 to-emerald-500 rounded-full flex items-center justify-center shadow-xl animate-float">
                            <i class="fas fa-check text-white text-lg"></i>
                        </div>
                        <!-- 额外装饰 -->
                        <div class="absolute -bottom-2 -left-2 w-6 h-6 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full animate-float opacity-80" style="animation-delay: 1.5s;"></div>
                    </div>

                    <h1 class="text-6xl font-black mb-8 bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 bg-clip-text text-transparent leading-tight">
                        使用帮助
                    </h1>
                    <p class="text-xl leading-relaxed max-w-4xl mx-auto mb-8" style="color: var(--text-secondary);">
                        <i class="fas fa-lightbulb text-yellow-500 mr-3 text-2xl"></i>
                        从数据导出到报告生成，一站式指南助您轻松掌握所有功能
                    </p>

                    <!-- 统计信息 -->
                    <div class="flex justify-center items-center space-x-12 mt-10">
                        <div class="text-center group">
                            <div class="text-3xl font-black text-indigo-600 mb-2 group-hover:scale-110 transition-transform duration-300">3</div>
                            <div class="text-sm font-medium" style="color: var(--text-secondary);">简单步骤</div>
                        </div>
                        <div class="text-center group">
                            <div class="text-3xl font-black text-purple-600 mb-2 group-hover:scale-110 transition-transform duration-300">8+</div>
                            <div class="text-sm font-medium" style="color: var(--text-secondary);">分析维度</div>
                        </div>
                        <div class="text-center group">
                            <div class="text-3xl font-black text-pink-600 mb-2 group-hover:scale-110 transition-transform duration-300">100%</div>
                            <div class="text-sm font-medium" style="color: var(--text-secondary);">数据安全</div>
                        </div>
                    </div>

                    <!-- 快速行动按钮 -->
                    <div class="mt-10">
                        <a href="index.html" class="inline-flex items-center px-8 py-4 rounded-2xl text-white font-bold text-lg btn-primary shadow-xl">
                            <i class="fas fa-rocket mr-3"></i>
                            立即开始分析
                        </a>
                    </div>
                </div>
            </div>
        </header>

        <!-- NPM 包安装和使用方法 -->
        <section class="mb-16 scroll-reveal">
            <div class="text-center mb-12">
                <h2 class="text-4xl font-bold mb-6 gradient-text">
                    <i class="fas fa-download text-green-600 mr-4 animate-float"></i>
                    NPM 包安装和使用
                </h2>
                <p class="text-xl max-w-2xl mx-auto" style="color: var(--text-secondary);">
                    除了在线使用，您还可以通过多种方式安装和运行本工具
                </p>
            </div>

            <div class="grid lg:grid-cols-2 gap-8">
                <!-- 全局安装方法 -->
                <div class="group animate-fade-in-left">
                    <div class="relative p-8 rounded-3xl transition-all duration-500 hover:shadow-2xl hover:-translate-y-4 card-hover" style="background: var(--card-bg); border: 1px solid var(--border-color);">
                        <!-- 图标区域 -->
                        <div class="text-center mb-8">
                            <div class="w-20 h-20 mx-auto bg-gradient-to-br from-green-500 to-emerald-600 rounded-3xl flex items-center justify-center mb-6 group-hover:scale-110 group-hover:rotate-6 transition-transform duration-500 shadow-xl">
                                <i class="fas fa-globe text-white text-3xl"></i>
                            </div>
                            <h3 class="text-2xl font-bold mb-4" style="color: var(--text-color);">全局安装使用</h3>
                        </div>

                        <div class="space-y-6">
                            <!-- NPM 安装 -->
                            <div class="p-4 rounded-lg" style="background: var(--surface-secondary);">
                                <h4 class="font-semibold mb-3 flex items-center" style="color: var(--text-color);">
                                    <i class="fab fa-npm text-red-500 mr-2"></i>
                                    使用 NPM 安装
                                </h4>
                                <div class="bg-gray-900 rounded-lg p-4 mb-3">
                                    <code class="text-green-400 font-mono text-sm">npm install -g linux-do-analyzer</code>
                                </div>
                                <div class="bg-gray-900 rounded-lg p-4">
                                    <code class="text-blue-400 font-mono text-sm">linux-do-analyzer</code>
                                </div>
                            </div>

                            <!-- PNPM 安装 -->
                            <div class="p-4 rounded-lg" style="background: var(--surface-secondary);">
                                <h4 class="font-semibold mb-3 flex items-center" style="color: var(--text-color);">
                                    <i class="fas fa-box text-orange-500 mr-2"></i>
                                    使用 PNPM 安装
                                </h4>
                                <div class="bg-gray-900 rounded-lg p-4 mb-3">
                                    <code class="text-green-400 font-mono text-sm">pnpm add -g linux-do-analyzer</code>
                                </div>
                                <div class="bg-gray-900 rounded-lg p-4">
                                    <code class="text-blue-400 font-mono text-sm">linux-do-analyzer --port 3000</code>
                                </div>
                            </div>

                            <!-- 启动选项 -->
                            <div class="p-4 rounded-lg border-l-4 border-green-500" style="background: var(--surface-secondary);">
                                <h4 class="font-semibold mb-2" style="color: var(--text-color);">
                                    <i class="fas fa-cog text-green-500 mr-2"></i>
                                    启动选项
                                </h4>
                                <ul class="text-sm space-y-1">
                                    <li style="color: var(--text-secondary);">• <code class="bg-gray-200 px-1 rounded">--port 端口号</code> 指定服务器端口</li>
                                    <li style="color: var(--text-secondary);">• <code class="bg-gray-200 px-1 rounded">--dev</code> 开发模式（文件监听）</li>
                                    <li style="color: var(--text-secondary);">• <code class="bg-gray-200 px-1 rounded">--help</code> 显示帮助信息</li>
                                    <li style="color: var(--text-secondary);">• <code class="bg-gray-200 px-1 rounded">--version</code> 显示版本信息</li>
                                </ul>
                            </div>
                        </div>

                        <!-- 装饰性元素 -->
                        <div class="absolute top-4 right-4 w-3 h-3 bg-green-300 rounded-full animate-float opacity-50"></div>
                        <div class="absolute bottom-4 left-4 w-2 h-2 bg-emerald-300 rounded-full animate-float opacity-60" style="animation-delay: 1s;"></div>
                    </div>
                </div>

                <!-- 临时运行方法 -->
                <div class="group animate-fade-in-right">
                    <div class="relative p-8 rounded-3xl transition-all duration-500 hover:shadow-2xl hover:-translate-y-4 card-hover" style="background: var(--card-bg); border: 1px solid var(--border-color);">
                        <!-- 图标区域 -->
                        <div class="text-center mb-8">
                            <div class="w-20 h-20 mx-auto bg-gradient-to-br from-blue-500 to-purple-600 rounded-3xl flex items-center justify-center mb-6 group-hover:scale-110 group-hover:-rotate-6 transition-transform duration-500 shadow-xl">
                                <i class="fas fa-bolt text-white text-3xl"></i>
                            </div>
                            <h3 class="text-2xl font-bold mb-4" style="color: var(--text-color);">临时运行使用</h3>
                        </div>

                        <div class="space-y-6">
                            <!-- NPX 使用 -->
                            <div class="p-4 rounded-lg" style="background: var(--surface-secondary);">
                                <h4 class="font-semibold mb-3 flex items-center" style="color: var(--text-color);">
                                    <i class="fab fa-npm text-red-500 mr-2"></i>
                                    使用 NPX（推荐）
                                </h4>
                                <div class="bg-gray-900 rounded-lg p-4 mb-2">
                                    <code class="text-green-400 font-mono text-sm">npx linux-do-analyzer</code>
                                </div>
                                <p class="text-xs" style="color: var(--text-secondary);">
                                    无需安装，直接运行最新版本
                                </p>
                            </div>

                            <!-- PNPX 使用 -->
                            <div class="p-4 rounded-lg" style="background: var(--surface-secondary);">
                                <h4 class="font-semibold mb-3 flex items-center" style="color: var(--text-color);">
                                    <i class="fas fa-box text-orange-500 mr-2"></i>
                                    使用 PNPX
                                </h4>
                                <div class="bg-gray-900 rounded-lg p-4 mb-2">
                                    <code class="text-green-400 font-mono text-sm">pnpx linux-do-analyzer</code>
                                </div>
                                <p class="text-xs" style="color: var(--text-secondary);">
                                    PNPM 的运行器，更快的下载速度
                                </p>
                            </div>

                            <!-- 带参数运行 -->
                            <div class="p-4 rounded-lg" style="background: var(--surface-secondary);">
                                <h4 class="font-semibold mb-3 flex items-center" style="color: var(--text-color);">
                                    <i class="fas fa-terminal text-blue-500 mr-2"></i>
                                    带参数运行示例
                                </h4>
                                <div class="space-y-2">
                                    <div class="bg-gray-900 rounded-lg p-3">
                                        <code class="text-green-400 font-mono text-xs">npx linux-do-analyzer --port 8080</code>
                                    </div>
                                    <div class="bg-gray-900 rounded-lg p-3">
                                        <code class="text-green-400 font-mono text-xs">pnpx linux-do-analyzer --dev</code>
                                    </div>
                                </div>
                            </div>

                            <!-- 优势说明 -->
                            <div class="p-4 rounded-lg border-l-4 border-blue-500" style="background: var(--surface-secondary);">
                                <h4 class="font-semibold mb-2" style="color: var(--text-color);">
                                    <i class="fas fa-star text-blue-500 mr-2"></i>
                                    临时运行优势
                                </h4>
                                <ul class="text-sm space-y-1">
                                    <li style="color: var(--text-secondary);">• 无需全局安装，节省磁盘空间</li>
                                    <li style="color: var(--text-secondary);">• 始终使用最新版本</li>
                                    <li style="color: var(--text-secondary);">• 适合偶尔使用的场景</li>
                                    <li style="color: var(--text-secondary);">• 避免版本冲突问题</li>
                                </ul>
                            </div>
                        </div>

                        <!-- 装饰性元素 -->
                        <div class="absolute top-4 right-4 w-3 h-3 bg-blue-300 rounded-full animate-float opacity-50"></div>
                        <div class="absolute bottom-4 left-4 w-2 h-2 bg-purple-300 rounded-full animate-float opacity-60" style="animation-delay: 1.5s;"></div>
                    </div>
                </div>
            </div>

            <!-- 使用场景对比 -->
            <div class="mt-12">
                <div class="p-8 rounded-3xl card-hover" style="background: var(--card-bg); border: 1px solid var(--border-color);">
                    <h3 class="text-2xl font-bold mb-6 text-center" style="color: var(--text-color);">
                        <i class="fas fa-balance-scale text-indigo-500 mr-3"></i>
                        使用方式对比
                    </h3>

                    <div class="grid md:grid-cols-3 gap-6">
                        <!-- 在线使用 -->
                        <div class="text-center p-6 rounded-2xl" style="background: var(--surface-secondary);">
                            <div class="w-16 h-16 mx-auto bg-gradient-to-br from-green-400 to-blue-500 rounded-2xl flex items-center justify-center mb-4">
                                <i class="fas fa-globe text-white text-2xl"></i>
                            </div>
                            <h4 class="font-bold mb-3" style="color: var(--text-color);">在线使用</h4>
                            <ul class="text-sm space-y-1 text-left">
                                <li class="flex items-center">
                                    <i class="fas fa-check text-green-500 mr-2"></i>
                                    <span style="color: var(--text-secondary);">即开即用，无需安装</span>
                                </li>
                                <li class="flex items-center">
                                    <i class="fas fa-check text-green-500 mr-2"></i>
                                    <span style="color: var(--text-secondary);">自动更新</span>
                                </li>
                                <li class="flex items-center">
                                    <i class="fas fa-times text-red-500 mr-2"></i>
                                    <span style="color: var(--text-secondary);">需要网络连接</span>
                                </li>
                            </ul>
                        </div>

                        <!-- 全局安装 -->
                        <div class="text-center p-6 rounded-2xl" style="background: var(--surface-secondary);">
                            <div class="w-16 h-16 mx-auto bg-gradient-to-br from-purple-400 to-pink-500 rounded-2xl flex items-center justify-center mb-4">
                                <i class="fas fa-download text-white text-2xl"></i>
                            </div>
                            <h4 class="font-bold mb-3" style="color: var(--text-color);">全局安装</h4>
                            <ul class="text-sm space-y-1 text-left">
                                <li class="flex items-center">
                                    <i class="fas fa-check text-green-500 mr-2"></i>
                                    <span style="color: var(--text-secondary);">离线可用</span>
                                </li>
                                <li class="flex items-center">
                                    <i class="fas fa-check text-green-500 mr-2"></i>
                                    <span style="color: var(--text-secondary);">启动快速</span>
                                </li>
                                <li class="flex items-center">
                                    <i class="fas fa-times text-red-500 mr-2"></i>
                                    <span style="color: var(--text-secondary);">占用磁盘空间</span>
                                </li>
                            </ul>
                        </div>

                        <!-- 临时运行 -->
                        <div class="text-center p-6 rounded-2xl" style="background: var(--surface-secondary);">
                            <div class="w-16 h-16 mx-auto bg-gradient-to-br from-orange-400 to-red-500 rounded-2xl flex items-center justify-center mb-4">
                                <i class="fas fa-bolt text-white text-2xl"></i>
                            </div>
                            <h4 class="font-bold mb-3" style="color: var(--text-color);">临时运行</h4>
                            <ul class="text-sm space-y-1 text-left">
                                <li class="flex items-center">
                                    <i class="fas fa-check text-green-500 mr-2"></i>
                                    <span style="color: var(--text-secondary);">无需安装</span>
                                </li>
                                <li class="flex items-center">
                                    <i class="fas fa-check text-green-500 mr-2"></i>
                                    <span style="color: var(--text-secondary);">始终最新版</span>
                                </li>
                                <li class="flex items-center">
                                    <i class="fas fa-times text-red-500 mr-2"></i>
                                    <span style="color: var(--text-secondary);">首次启动较慢</span>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!-- 推荐使用场景 -->
                    <div class="mt-8 p-6 rounded-2xl border-l-4 border-indigo-500" style="background: var(--surface-secondary);">
                        <h4 class="font-bold mb-4 flex items-center" style="color: var(--text-color);">
                            <i class="fas fa-lightbulb text-yellow-500 mr-3"></i>
                            推荐使用场景
                        </h4>
                        <div class="grid md:grid-cols-3 gap-4 text-sm">
                            <div>
                                <strong style="color: var(--text-color);">在线使用：</strong>
                                <span style="color: var(--text-secondary);">偶尔使用、快速体验</span>
                            </div>
                            <div>
                                <strong style="color: var(--text-color);">全局安装：</strong>
                                <span style="color: var(--text-secondary);">频繁使用、离线环境</span>
                            </div>
                            <div>
                                <strong style="color: var(--text-color);">临时运行：</strong>
                                <span style="color: var(--text-secondary);">测试最新版、CI/CD</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 快速开始 - 现代化设计 -->
        <section class="mb-16 scroll-reveal">
            <div class="text-center mb-12">
                <h2 class="text-4xl font-bold mb-6 gradient-text">
                    <i class="fas fa-rocket text-indigo-600 mr-4 animate-float"></i>
                    快速开始
                </h2>
                <p class="text-xl max-w-2xl mx-auto" style="color: var(--text-secondary);">
                    三个简单步骤，立即开始分析您的数据
                </p>
            </div>

            <div class="grid md:grid-cols-3 gap-8">
                <!-- 步骤1 - 现代化卡片设计 -->
                <div class="group animate-fade-in-left">
                    <div class="relative p-8 rounded-3xl transition-all duration-500 hover:shadow-2xl hover:-translate-y-4 card-hover" style="background: var(--card-bg); border: 1px solid var(--border-color);">
                        <!-- 步骤指示器 -->
                        <div class="absolute -top-5 left-8">
                            <div class="w-10 h-10 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full flex items-center justify-center text-white font-black text-lg shadow-xl animate-pulse-glow">
                                1
                            </div>
                        </div>

                        <!-- 图标区域 -->
                        <div class="text-center mb-8">
                            <div class="w-20 h-20 mx-auto bg-gradient-to-br from-indigo-500 to-blue-600 rounded-3xl flex items-center justify-center mb-6 group-hover:scale-110 group-hover:rotate-6 transition-transform duration-500 shadow-xl">
                                <i class="fas fa-download text-white text-3xl"></i>
                            </div>
                            <h3 class="text-2xl font-bold mb-4" style="color: var(--text-color);">获取数据</h3>
                        </div>

                        <p class="text-base leading-relaxed text-center mb-6" style="color: var(--text-secondary);">
                            访问 Linux.do 个人设置页面，申请并下载您的个人数据档案
                        </p>

                        <!-- 操作链接 -->
                        <div class="text-center">
                            <a href="https://linux.do/my/preferences/account" target="_blank"
                               class="inline-flex items-center px-6 py-3 rounded-xl text-white font-medium text-sm bg-gradient-to-r from-indigo-500 to-blue-600 hover:from-indigo-600 hover:to-blue-700 transition-all duration-300 hover:-translate-y-1 shadow-lg">
                                <i class="fas fa-external-link-alt mr-2"></i>
                                前往论坛设置
                            </a>
                        </div>

                        <!-- 装饰性元素 -->
                        <div class="absolute top-4 right-4 w-3 h-3 bg-indigo-300 rounded-full animate-float opacity-50"></div>
                        <div class="absolute bottom-4 left-4 w-2 h-2 bg-blue-300 rounded-full animate-float opacity-60" style="animation-delay: 1s;"></div>
                    </div>
                </div>

                <!-- 步骤2 -->
                <div class="group animate-fade-in-up" style="animation-delay: 0.2s;">
                    <div class="relative p-8 rounded-3xl transition-all duration-500 hover:shadow-2xl hover:-translate-y-4 card-hover" style="background: var(--card-bg); border: 1px solid var(--border-color);">
                        <div class="absolute -top-5 left-8">
                            <div class="w-10 h-10 bg-gradient-to-r from-purple-500 to-pink-600 rounded-full flex items-center justify-center text-white font-black text-lg shadow-xl animate-pulse-glow" style="animation-delay: 0.5s;">
                                2
                            </div>
                        </div>

                        <div class="text-center mb-8">
                            <div class="w-20 h-20 mx-auto bg-gradient-to-br from-purple-500 to-pink-600 rounded-3xl flex items-center justify-center mb-6 group-hover:scale-110 group-hover:-rotate-6 transition-transform duration-500 shadow-xl">
                                <i class="fas fa-upload text-white text-3xl"></i>
                            </div>
                            <h3 class="text-2xl font-bold mb-4" style="color: var(--text-color);">上传分析</h3>
                        </div>

                        <p class="text-base leading-relaxed text-center mb-6" style="color: var(--text-secondary);">
                            将下载的 ZIP 文件拖拽上传，系统自动解析并开始分析
                        </p>

                        <div class="text-center">
                            <a href="index.html"
                               class="inline-flex items-center px-6 py-3 rounded-xl text-white font-medium text-sm bg-gradient-to-r from-purple-500 to-pink-600 hover:from-purple-600 hover:to-pink-700 transition-all duration-300 hover:-translate-y-1 shadow-lg">
                                <i class="fas fa-arrow-right mr-2"></i>
                                开始上传
                            </a>
                        </div>

                        <div class="absolute top-4 right-4 w-3 h-3 bg-purple-300 rounded-full animate-float opacity-50"></div>
                        <div class="absolute bottom-4 left-4 w-2 h-2 bg-pink-300 rounded-full animate-float opacity-60" style="animation-delay: 1.5s;"></div>
                    </div>
                </div>

                <!-- 步骤3 -->
                <div class="group animate-fade-in-right" style="animation-delay: 0.4s;">
                    <div class="relative p-8 rounded-3xl transition-all duration-500 hover:shadow-2xl hover:-translate-y-4 card-hover" style="background: var(--card-bg); border: 1px solid var(--border-color);">
                        <div class="absolute -top-5 left-8">
                            <div class="w-10 h-10 bg-gradient-to-r from-green-500 to-emerald-600 rounded-full flex items-center justify-center text-white font-black text-lg shadow-xl animate-pulse-glow" style="animation-delay: 1s;">
                                3
                            </div>
                        </div>

                        <div class="text-center mb-8">
                            <div class="w-20 h-20 mx-auto bg-gradient-to-br from-green-500 to-emerald-600 rounded-3xl flex items-center justify-center mb-6 group-hover:scale-110 group-hover:rotate-12 transition-transform duration-500 shadow-xl">
                                <i class="fas fa-chart-bar text-white text-3xl"></i>
                            </div>
                            <h3 class="text-2xl font-bold mb-4" style="color: var(--text-color);">查看报告</h3>
                        </div>

                        <p class="text-base leading-relaxed text-center mb-6" style="color: var(--text-secondary);">
                            自动生成包含图表、统计和深度洞察的专业分析报告
                        </p>

                        <div class="text-center">
                            <span class="inline-flex items-center px-6 py-3 rounded-xl text-white font-medium text-sm bg-gradient-to-r from-green-500 to-emerald-600 shadow-lg">
                                <i class="fas fa-magic mr-2"></i>
                                智能生成
                            </span>
                        </div>

                        <div class="absolute top-4 right-4 w-3 h-3 bg-green-300 rounded-full animate-float opacity-50"></div>
                        <div class="absolute bottom-4 left-4 w-2 h-2 bg-emerald-300 rounded-full animate-float opacity-60" style="animation-delay: 2s;"></div>
                    </div>
                </div>
            </div>

            <!-- 连接线装饰 -->
            <div class="hidden md:block relative -mt-8">
                <div class="absolute top-0 left-1/3 w-1/3 h-px bg-gradient-to-r from-indigo-300 via-purple-300 to-green-300 opacity-30"></div>
            </div>
        </section>

        <!-- 详细步骤 -->
        <section class="mb-8 scroll-reveal">
            <div class="p-8 rounded-3xl card-hover" style="background: var(--card-bg); border: 1px solid var(--border-color);">
                <h2 class="text-3xl font-bold mb-8 flex items-center" style="color: var(--text-color);">
                    <i class="fas fa-list-ol text-green-500 mr-4 animate-float"></i>
                    详细操作步骤
                </h2>

                <div class="space-y-8">
                    <!-- 步骤1 -->
                    <div class="border-l-4 pl-6" style="border-color: var(--primary-color);">
                        <h3 class="text-xl font-semibold mb-3" style="color: var(--text-color);">
                            第一步：导出论坛数据
                        </h3>
                        <div class="space-y-3">
                            <div class="flex items-start">
                                <i class="fas fa-chevron-right mt-1 mr-3" style="color: var(--primary-color);"></i>
                                <div>
                                    <p style="color: var(--text-secondary);">登录您的 Linux.do 账户</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <i class="fas fa-chevron-right mt-1 mr-3" style="color: var(--primary-color);"></i>
                                <div>
                                    <p style="color: var(--text-secondary);">
                                        访问个人设置页面：
                                        <a href="https://linux.do/my/preferences/account" target="_blank"
                                           class="font-medium hover:opacity-70 transition-opacity" style="color: var(--primary-color);">
                                            linux.do/my/preferences/account
                                        </a>
                                    </p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <i class="fas fa-chevron-right mt-1 mr-3" style="color: var(--primary-color);"></i>
                                <div>
                                    <p style="color: var(--text-secondary);">滚动到页面底部，找到"下载我的档案"部分</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <i class="fas fa-chevron-right mt-1 mr-3" style="color: var(--primary-color);"></i>
                                <div>
                                    <p style="color: var(--text-secondary);">点击"请求下载"按钮，等待邮件通知</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <i class="fas fa-chevron-right mt-1 mr-3" style="color: var(--primary-color);"></i>
                                <div>
                                    <p style="color: var(--text-secondary);">从邮件中下载 ZIP 数据包（通常几分钟内收到）</p>
                                </div>
                            </div>
                        </div>

                        <div class="mt-4 p-4 rounded-lg border-l-4 border-orange-500" style="background: var(--surface-secondary);">
                            <p class="text-sm" style="color: var(--text-secondary);">
                                <i class="fas fa-exclamation-triangle text-orange-500 mr-2"></i>
                                <strong>注意：</strong>请确保下载的 ZIP 文件大小不超过 10MB
                            </p>
                        </div>
                    </div>

                    <!-- 步骤2 -->
                    <div class="border-l-4 pl-6" style="border-color: var(--primary-color);">
                        <h3 class="text-xl font-semibold mb-3" style="color: var(--text-color);">
                            第二步：上传数据文件
                        </h3>
                        <div class="space-y-3">
                            <div class="flex items-start">
                                <i class="fas fa-chevron-right mt-1 mr-3" style="color: var(--primary-color);"></i>
                                <div>
                                    <p style="color: var(--text-secondary);">返回数据分析工具主页</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <i class="fas fa-chevron-right mt-1 mr-3" style="color: var(--primary-color);"></i>
                                <div>
                                    <p style="color: var(--text-secondary);">
                                        <strong>方式一：</strong>直接将 ZIP 文件拖拽到上传区域
                                    </p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <i class="fas fa-chevron-right mt-1 mr-3" style="color: var(--primary-color);"></i>
                                <div>
                                    <p style="color: var(--text-secondary);">
                                        <strong>方式二：</strong>点击上传区域或"选择文件"按钮，选择 ZIP 文件
                                    </p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <i class="fas fa-chevron-right mt-1 mr-3" style="color: var(--primary-color);"></i>
                                <div>
                                    <p style="color: var(--text-secondary);">工具将自动开始解析和分析您的数据</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 步骤3 -->
                    <div class="border-l-4 pl-6" style="border-color: var(--primary-color);">
                        <h3 class="text-xl font-semibold mb-3" style="color: var(--text-color);">
                            第三步：查看分析结果
                        </h3>
                        <div class="space-y-3">
                            <div class="flex items-start">
                                <i class="fas fa-chevron-right mt-1 mr-3" style="color: var(--primary-color);"></i>
                                <div>
                                    <p style="color: var(--text-secondary);">分析完成后，页面会自动显示结果</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <i class="fas fa-chevron-right mt-1 mr-3" style="color: var(--primary-color);"></i>
                                <div>
                                    <p style="color: var(--text-secondary);">查看用户信息概览和数据统计卡片</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <i class="fas fa-chevron-right mt-1 mr-3" style="color: var(--primary-color);"></i>
                                <div>
                                    <p style="color: var(--text-secondary);">浏览各种可视化图表（访问趋势、徽章时间线等）</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <i class="fas fa-chevron-right mt-1 mr-3" style="color: var(--primary-color);"></i>
                                <div>
                                    <p style="color: var(--text-secondary);">查看详细数据表格，支持搜索和分页</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 功能介绍 -->
        <section class="mb-8 scroll-reveal">
            <div class="p-8 rounded-3xl card-hover" style="background: var(--card-bg); border: 1px solid var(--border-color);">
                <h2 class="text-3xl font-bold mb-8 flex items-center" style="color: var(--text-color);">
                    <i class="fas fa-star text-yellow-500 mr-4 animate-float"></i>
                    功能特性介绍
                </h2>

                <div class="grid md:grid-cols-2 gap-6">
                    <div class="space-y-4">
                        <div class="p-4 rounded-lg" style="background: var(--surface-secondary);">
                            <h3 class="font-semibold mb-2 flex items-center" style="color: var(--text-color);">
                                <i class="fas fa-chart-bar text-blue-500 mr-2"></i>
                                多维度数据分析
                            </h3>
                            <ul class="text-sm space-y-1">
                                <li style="color: var(--text-secondary);">• 用户活跃度和发帖统计</li>
                                <li style="color: var(--text-secondary);">• 点赞互动分析</li>
                                <li style="color: var(--text-secondary);">• 徽章成就追踪</li>
                                <li style="color: var(--text-secondary);">• 设备使用情况</li>
                            </ul>
                        </div>

                        <div class="p-4 rounded-lg" style="background: var(--surface-secondary);">
                            <h3 class="font-semibold mb-2 flex items-center" style="color: var(--text-color);">
                                <i class="fas fa-chart-line text-green-500 mr-2"></i>
                                可视化图表
                            </h3>
                            <ul class="text-sm space-y-1">
                                <li style="color: var(--text-secondary);">• 访问趋势线图</li>
                                <li style="color: var(--text-secondary);">• 徽章获得时间线</li>
                                <li style="color: var(--text-secondary);">• 设备使用饼图</li>
                                <li style="color: var(--text-secondary);">• 发帖活动热力图</li>
                            </ul>
                        </div>
                    </div>

                    <div class="space-y-4">
                        <div class="p-4 rounded-lg" style="background: var(--surface-secondary);">
                            <h3 class="font-semibold mb-2 flex items-center" style="color: var(--text-color);">
                                <i class="fas fa-table text-purple-500 mr-2"></i>
                                详细数据表格
                            </h3>
                            <ul class="text-sm space-y-1">
                                <li style="color: var(--text-secondary);">• 发帖记录详情</li>
                                <li style="color: var(--text-secondary);">• 访问记录查询</li>
                                <li style="color: var(--text-secondary);">• 点赞历史记录</li>
                                <li style="color: var(--text-secondary);">• 支持搜索和分页</li>
                            </ul>
                        </div>

                        <div class="p-4 rounded-lg" style="background: var(--surface-secondary);">
                            <h3 class="font-semibold mb-2 flex items-center" style="color: var(--text-color);">
                                <i class="fas fa-palette text-orange-500 mr-2"></i>
                                主题切换
                            </h3>
                            <ul class="text-sm space-y-1">
                                <li style="color: var(--text-secondary);">• 简洁主题（默认）</li>
                                <li style="color: var(--text-secondary);">• 现代主题</li>
                                <li style="color: var(--text-secondary);">• 商务主题</li>
                                <li style="color: var(--text-secondary);">• 设置自动保存</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 数据管理 -->
        <section class="mb-8 scroll-reveal">
            <div class="p-8 rounded-3xl card-hover" style="background: var(--card-bg); border: 1px solid var(--border-color);">
                <h2 class="text-3xl font-bold mb-8 flex items-center" style="color: var(--text-color);">
                    <i class="fas fa-database text-blue-500 mr-4 animate-float"></i>
                    数据管理功能
                </h2>

                <div class="grid md:grid-cols-3 gap-6">
                    <div class="p-4 rounded-lg border-l-4 border-blue-500" style="background: var(--surface-secondary);">
                        <h3 class="font-semibold mb-2 flex items-center" style="color: var(--text-color);">
                            <i class="fas fa-eye text-blue-500 mr-2"></i>
                            查看已存储数据
                        </h3>
                        <p class="text-sm" style="color: var(--text-secondary);">
                            查看之前分析过的数据记录，快速重新加载分析结果
                        </p>
                    </div>

                    <div class="p-4 rounded-lg border-l-4 border-green-500" style="background: var(--surface-secondary);">
                        <h3 class="font-semibold mb-2 flex items-center" style="color: var(--text-color);">
                            <i class="fas fa-download text-green-500 mr-2"></i>
                            导出分析数据
                        </h3>
                        <p class="text-sm" style="color: var(--text-secondary);">
                            将分析结果导出为 JSON 格式，便于备份和分享
                        </p>
                    </div>

                    <div class="p-4 rounded-lg border-l-4 border-red-500" style="background: var(--surface-secondary);">
                        <h3 class="font-semibold mb-2 flex items-center" style="color: var(--text-color);">
                            <i class="fas fa-trash-alt text-red-500 mr-2"></i>
                            清空所有数据
                        </h3>
                        <p class="text-sm" style="color: var(--text-secondary);">
                            一键清除所有本地存储的分析数据，保护隐私
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 常见问题 -->
        <section class="mb-8 scroll-reveal">
            <div class="p-8 rounded-3xl card-hover" style="background: var(--card-bg); border: 1px solid var(--border-color);">
                <h2 class="text-3xl font-bold mb-8 flex items-center" style="color: var(--text-color);">
                    <i class="fas fa-question-circle text-orange-500 mr-4 animate-float"></i>
                    常见问题解答
                </h2>

                <div class="space-y-4">
                    <div class="p-4 rounded-lg border-l-4 border-blue-500" style="background: var(--surface-secondary);">
                        <h3 class="font-semibold mb-2" style="color: var(--text-color);">
                            Q: 我的数据安全吗？
                        </h3>
                        <p class="text-sm" style="color: var(--text-secondary);">
                            A: 完全安全。所有数据分析都在您的浏览器本地进行，不会上传到任何服务器。详情请查看我们的
                            <a href="privacy.html" class="font-medium hover:opacity-70 transition-opacity" style="color: var(--primary-color);">隐私政策</a>。
                        </p>
                    </div>

                    <div class="p-4 rounded-lg border-l-4 border-green-500" style="background: var(--surface-secondary);">
                        <h3 class="font-semibold mb-2" style="color: var(--text-color);">
                            Q: 支持哪些数据文件？
                        </h3>
                        <p class="text-sm" style="color: var(--text-secondary);">
                            A: 支持 Linux.do 导出的所有数据文件，包括发帖记录、访问记录、点赞记录、徽章记录等。必需文件：user_archive.csv 和 preferences.json。
                        </p>
                    </div>

                    <div class="p-4 rounded-lg border-l-4 border-orange-500" style="background: var(--surface-secondary);">
                        <h3 class="font-semibold mb-2" style="color: var(--text-color);">
                            Q: 文件大小有限制吗？
                        </h3>
                        <p class="text-sm" style="color: var(--text-secondary);">
                            A: 是的，ZIP 文件大小限制为 10MB。如果您的文件过大，请联系 Linux.do 管理员或删除部分不必要的数据。
                        </p>
                    </div>

                    <div class="p-4 rounded-lg border-l-4 border-purple-500" style="background: var(--surface-secondary);">
                        <h3 class="font-semibold mb-2" style="color: var(--text-color);">
                            Q: 可以离线使用吗？
                        </h3>
                        <p class="text-sm" style="color: var(--text-secondary);">
                            A: 是的，除了首次加载页面需要网络，所有分析功能都可以在离线状态下使用。
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 键盘快捷键 -->
        <section class="mb-8 scroll-reveal">
            <div class="p-8 rounded-3xl card-hover" style="background: var(--card-bg); border: 1px solid var(--border-color);">
                <h2 class="text-3xl font-bold mb-8 flex items-center" style="color: var(--text-color);">
                    <i class="fas fa-keyboard text-purple-500 mr-4 animate-float"></i>
                    键盘快捷键
                </h2>

                <div class="grid md:grid-cols-2 gap-6">
                    <div class="p-4 rounded-lg" style="background: var(--surface-secondary);">
                        <h3 class="font-semibold mb-3" style="color: var(--text-color);">文件操作</h3>
                        <div class="space-y-2 text-sm">
                            <div class="flex items-center justify-between">
                                <span style="color: var(--text-secondary);">打开文件</span>
                                <kbd class="px-2 py-1 rounded text-xs" style="background: var(--primary-color); color: white;">Ctrl + O</kbd>
                            </div>
                            <div class="flex items-center justify-between">
                                <span style="color: var(--text-secondary);">导出数据</span>
                                <kbd class="px-2 py-1 rounded text-xs" style="background: var(--primary-color); color: white;">Ctrl + E</kbd>
                            </div>
                        </div>
                    </div>

                    <div class="p-4 rounded-lg" style="background: var(--surface-secondary);">
                        <h3 class="font-semibold mb-3" style="color: var(--text-color);">界面操作</h3>
                        <div class="space-y-2 text-sm">
                            <div class="flex items-center justify-between">
                                <span style="color: var(--text-secondary);">关闭弹窗</span>
                                <kbd class="px-2 py-1 rounded text-xs" style="background: var(--primary-color); color: white;">Esc</kbd>
                            </div>
                            <div class="flex items-center justify-between">
                                <span style="color: var(--text-secondary);">搜索数据</span>
                                <kbd class="px-2 py-1 rounded text-xs" style="background: var(--primary-color); color: white;">Ctrl + F</kbd>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 技术支持 -->
        <section class="mb-8 scroll-reveal">
            <div class="p-8 rounded-3xl card-hover" style="background: var(--card-bg); border: 1px solid var(--border-color);">
                <h2 class="text-3xl font-bold mb-8 flex items-center" style="color: var(--text-color);">
                    <i class="fas fa-life-ring text-red-500 mr-4 animate-float"></i>
                    技术支持
                </h2>

                <div class="grid md:grid-cols-2 gap-6">
                    <div class="p-4 rounded-lg" style="background: var(--surface-secondary);">
                        <h3 class="font-semibold mb-2" style="color: var(--text-color);">遇到问题？</h3>
                        <p class="text-sm mb-3" style="color: var(--text-secondary);">
                            如果您在使用过程中遇到任何问题，请通过以下方式获取帮助：
                        </p>
                        <a href="https://github.com/dext7r/linux-do-analyzer/issues"
                           target="_blank"
                           class="inline-flex items-center text-sm hover:opacity-70 transition-opacity"
                           style="color: var(--primary-color);">
                            <i class="fab fa-github mr-2"></i>
                            提交 GitHub Issue
                        </a>
                    </div>

                    <div class="p-4 rounded-lg" style="background: var(--surface-secondary);">
                        <h3 class="font-semibold mb-2" style="color: var(--text-color);">功能建议</h3>
                        <p class="text-sm mb-3" style="color: var(--text-secondary);">
                            我们欢迎您的功能建议和改进意见：
                        </p>
                        <a href="https://linux.do/"
                           target="_blank"
                           class="inline-flex items-center text-sm hover:opacity-70 transition-opacity"
                           style="color: var(--primary-color);">
                            <i class="fas fa-users mr-2"></i>
                            Linux.do 社区讨论
                        </a>
                    </div>
                </div>
            </div>
        </section>

    </div>

    <!-- Footer -->
    <footer class="relative z-10 bg-white border-t border-gray-200 overflow-hidden">
        <!-- 背景装饰 -->
        <div class="absolute inset-0 opacity-30">
            <!-- 光晕效果 -->
            <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-indigo-100 rounded-full filter blur-3xl"></div>
            <div class="absolute bottom-1/4 right-1/4 w-80 h-80 bg-purple-100 rounded-full filter blur-3xl"></div>
        </div>

        <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- 主要内容区域 -->
            <div class="py-16">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                    <!-- 品牌介绍 -->
                    <div class="md:col-span-2">
                        <div class="flex items-center space-x-3 mb-6">
                            <div class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center">
                                <span class="text-white text-2xl">📊</span>
                            </div>
                            <div>
                                <h3 class="text-2xl font-bold text-gray-800">
                                    Linux.do Analyzer
                                </h3>
                                <p class="text-sm text-gray-600">专业的论坛数据分析工具</p>
                            </div>
                        </div>
                        <p class="text-gray-600 leading-relaxed mb-6 max-w-md">
                            为 Linux.do 社区用户提供专业的个人数据分析服务，
                            100% 本地处理，保护隐私安全，助您深入了解自己的论坛活动模式。
                        </p>

                        <!-- 特性标签 -->
                        <div class="flex flex-wrap gap-2">
                            <span class="px-3 py-1 bg-indigo-500/20 text-indigo-300 rounded-full text-xs font-medium border border-indigo-500/30">
                                🔒 隐私保护
                            </span>
                            <span class="px-3 py-1 bg-green-500/20 text-green-300 rounded-full text-xs font-medium border border-green-500/30">
                                📊 数据可视化
                            </span>
                            <span class="px-3 py-1 bg-purple-500/20 text-purple-300 rounded-full text-xs font-medium border border-purple-500/30">
                                ⚡ 实时分析
                            </span>
                        </div>
                    </div>

                    <!-- 快速链接 -->
                    <div>
                        <h4 class="text-lg font-semibold mb-4 text-gray-800">快速导航</h4>
                        <ul class="space-y-3">
                            <li>
                                <a href="index.html" class="text-gray-600 hover:text-indigo-600 transition-colors duration-200 flex items-center group">
                                    <i class="fas fa-chart-bar mr-2 group-hover:text-indigo-400"></i>
                                    数据分析
                                </a>
                            </li>
                            <li>
                                <a href="help.html" class="text-gray-600 hover:text-indigo-600 transition-colors duration-200 flex items-center group">
                                    <i class="fas fa-question-circle mr-2 group-hover:text-blue-400"></i>
                                    使用帮助
                                </a>
                            </li>
                            <li>
                                <a href="faq.html" class="text-gray-600 hover:text-indigo-600 transition-colors duration-200 flex items-center group">
                                    <i class="fas fa-comments mr-2 group-hover:text-green-400"></i>
                                    常见问题
                                </a>
                            </li>
                            <li>
                                <a href="privacy.html" class="text-gray-600 hover:text-indigo-600 transition-colors duration-200 flex items-center group">
                                    <i class="fas fa-shield-alt mr-2 group-hover:text-purple-400"></i>
                                    隐私政策
                                </a>
                            </li>
                        </ul>
                    </div>

                    <!-- 社区连接 -->
                    <div>
                        <h4 class="text-lg font-semibold mb-4 text-gray-800">社区连接</h4>
                        <ul class="space-y-3">
                            <li>
                                <a href="https://linux.do" target="_blank" class="text-gray-600 hover:text-indigo-600 transition-colors duration-200 flex items-center group">
                                    <i class="fas fa-external-link-alt mr-2 group-hover:text-orange-400"></i>
                                    Linux.do 论坛
                                </a>
                            </li>
                            <li>
                                <a href="https://github.com/dext7r/linux-do-analyzer" target="_blank" class="text-gray-600 hover:text-indigo-600 transition-colors duration-200 flex items-center group">
                                    <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub" class="w-4 h-4 mr-2 opacity-70 group-hover:opacity-100 transition-opacity">
                                    GitHub 源码
                                </a>
                            </li>
                            <li>
                                <a href="https://linux.do/t/topic/992628/9999" class="text-gray-600 hover:text-indigo-600 transition-colors duration-200 flex items-center group">
                                    <i class="fas fa-bug mr-2 group-hover:text-red-400"></i>
                                    反馈问题
                                </a>
                            </li>
                            <li>
                                <a href="about.html" class="text-gray-600 hover:text-indigo-600 transition-colors duration-200 flex items-center group">
                                    <i class="fas fa-info-circle mr-2 group-hover:text-blue-400"></i>
                                    关于项目
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 分隔线 -->
            <div class="border-t border-gray-700/50"></div>

            <!-- 底部信息 -->
            <div class="py-8">
                <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
                    <!-- 版权信息 -->
                    <div class="text-center md:text-left">
                        <p class="text-gray-600 text-sm">
                            © 2025 Linux.do Analyzer. Made with
                            <i class="fas fa-heart text-red-500 mx-1"></i>
                            for Linux.do Community
                        </p>
                        <p class="text-gray-500 text-xs mt-1">
                            Powered by Deno + TailwindCSS + Chart.js
                        </p>
                    </div>

                    <!-- 技术标识 -->
                    <div class="flex items-center space-x-4">
                        <div class="flex items-center space-x-2 text-gray-600 text-sm">
                            <i class="fas fa-shield-alt text-green-500"></i>
                            <span>100% 本地处理</span>
                        </div>
                        <div class="flex items-center space-x-2 text-gray-600 text-sm">
                            <i class="fas fa-lock text-blue-500"></i>
                            <span>数据安全</span>
                        </div>
                        <div class="flex items-center space-x-2 text-gray-600 text-sm">
                            <i class="fas fa-code text-purple-500"></i>
                            <span>开源项目</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部装饰 -->
        <div class="h-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button id="backToTop"
            class="fixed bottom-8 right-8 w-12 h-12 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 opacity-0 invisible z-50"
            title="返回顶部">
        <i class="fas fa-chevron-up"></i>
    </button>

    <script>
        // 主题管理
        class ThemeManager {
            constructor() {
                this.currentTheme = localStorage.getItem('app-theme') || 'apple';
                this.init();
            }

            init() {
                this.applyTheme(this.currentTheme);
                this.setupThemeSelector();
            }

            applyTheme(theme) {
                document.documentElement.removeAttribute('data-theme');
                if (theme !== 'apple') {
                    document.documentElement.setAttribute('data-theme', theme);
                }
                const selector = document.getElementById('themeSelector');
                if (selector) {
                    selector.value = theme;
                }
                localStorage.setItem('app-theme', theme);
            }

            setupThemeSelector() {
                const selector = document.getElementById('themeSelector');
                if (selector) {
                    selector.addEventListener('change', (e) => {
                        this.applyTheme(e.target.value);
                    });
                }
            }
        }

        // 滚动动画管理器
        class ScrollAnimationManager {
            constructor() {
                this.observer = null;
                this.init();
            }

            init() {
                this.setupIntersectionObserver();
                this.observeElements();
            }

            setupIntersectionObserver() {
                const options = {
                    root: null,
                    rootMargin: '0px 0px -100px 0px',
                    threshold: 0.1
                };

                this.observer = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            entry.target.classList.add('visible');
                        }
                    });
                }, options);
            }

            observeElements() {
                const elements = document.querySelectorAll('.scroll-reveal');
                elements.forEach(element => {
                    this.observer.observe(element);
                });
            }
        }

        // 导航栏滚动效果
        class NavigationManager {
            constructor() {
                this.nav = document.querySelector('nav');
                this.init();
            }

            init() {
                window.addEventListener('scroll', () => {
                    this.handleScroll();
                });
            }

            handleScroll() {
                const scrollY = window.scrollY;
                if (scrollY > 50) {
                    this.nav.style.backdropFilter = 'blur(20px)';
                    this.nav.style.background = 'var(--card-bg)';
                    this.nav.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.1)';
                } else {
                    this.nav.style.backdropFilter = 'blur(10px)';
                    this.nav.style.background = 'var(--card-bg)';
                    this.nav.style.boxShadow = 'none';
                }
            }
        }

        // 页面加载动画
        class PageLoadAnimator {
            constructor() {
                this.init();
            }

            init() {
                // 页面加载完成后添加动画
                window.addEventListener('load', () => {
                    this.animatePageLoad();
                });
            }

            animatePageLoad() {
                // 给所有主要区块添加延迟动画
                const sections = document.querySelectorAll('section');
                sections.forEach((section, index) => {
                    section.style.animationDelay = `${index * 0.1}s`;
                    section.classList.add('scroll-reveal');
                });
            }
        }

        // 键盘快捷键管理
        class KeyboardShortcuts {
            constructor() {
                this.init();
            }

            init() {
                document.addEventListener('keydown', (e) => {
                    this.handleKeydown(e);
                });
            }

            handleKeydown(e) {
                // Ctrl/Cmd + / 显示快捷键帮助
                if ((e.ctrlKey || e.metaKey) && e.key === '/') {
                    e.preventDefault();
                    this.showShortcutsModal();
                }

                // Esc 键关闭模态框
                if (e.key === 'Escape') {
                    this.closeModals();
                }
            }

            showShortcutsModal() {
                // 快捷键帮助模态框
                const modal = document.createElement('div');
                modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
                modal.innerHTML = `
                    <div class="bg-white rounded-2xl p-8 max-w-md mx-4 shadow-2xl" style="background: var(--card-bg);">
                        <h3 class="text-2xl font-bold mb-6" style="color: var(--text-color);">
                            <i class="fas fa-keyboard mr-2"></i>
                            键盘快捷键
                        </h3>
                        <div class="space-y-4">
                            <div class="flex justify-between items-center">
                                <span style="color: var(--text-secondary);">显示快捷键</span>
                                <kbd class="px-3 py-1 rounded text-sm" style="background: var(--primary-color); color: white;">Ctrl + /</kbd>
                            </div>
                            <div class="flex justify-between items-center">
                                <span style="color: var(--text-secondary);">关闭弹窗</span>
                                <kbd class="px-3 py-1 rounded text-sm" style="background: var(--primary-color); color: white;">Esc</kbd>
                            </div>
                        </div>
                        <button onclick="this.parentElement.parentElement.remove()"
                                class="mt-6 w-full py-2 px-4 rounded-lg text-white font-medium btn-primary">
                            关闭
                        </button>
                    </div>
                `;
                document.body.appendChild(modal);
            }

            closeModals() {
                const modals = document.querySelectorAll('.fixed.inset-0');
                modals.forEach(modal => modal.remove());
            }
        }

        // 初始化所有管理器
        document.addEventListener('DOMContentLoaded', () => {
            new ThemeManager();
            new ScrollAnimationManager();
            new NavigationManager();
            new PageLoadAnimator();
            new KeyboardShortcuts();

            // 移动端菜单功能
            const mobileMenuBtn = document.getElementById('mobileMenuBtn');
            const mobileMenu = document.getElementById('mobileMenu');
            const mobileMenuIcon = mobileMenuBtn.querySelector('i');

            mobileMenuBtn.addEventListener('click', function() {
                mobileMenu.classList.toggle('hidden');
                mobileMenuIcon.classList.toggle('fa-bars');
                mobileMenuIcon.classList.toggle('fa-times');
            });

            // 同步主题选择器
            const themeSelector = document.getElementById('themeSelector');
            const mobileThemeSelector = document.getElementById('mobileThemeSelector');

            themeSelector.addEventListener('change', function() {
                mobileThemeSelector.value = this.value;
            });

            mobileThemeSelector.addEventListener('change', function() {
                themeSelector.value = this.value;
                // 触发主题切换事件
                const event = new Event('change');
                themeSelector.dispatchEvent(event);
            });

            // 返回顶部按钮功能
            const backToTopButton = document.getElementById('backToTop');

            // 监听滚动事件 - 控制返回顶部按钮显示
            window.addEventListener('scroll', function() {
                if (window.pageYOffset > 300) {
                    backToTopButton.classList.remove('opacity-0', 'invisible');
                    backToTopButton.classList.add('opacity-100', 'visible');
                } else {
                    backToTopButton.classList.add('opacity-0', 'invisible');
                    backToTopButton.classList.remove('opacity-100', 'visible');
                }
            });

            // 点击返回顶部
            backToTopButton.addEventListener('click', function() {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });

            // 平滑滚动支持
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    const target = document.querySelector(this.getAttribute('href'));
                    if (target) {
                        target.scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                    }
                });
            });

            // 添加页面加载完成的淡入效果
            document.body.style.opacity = '0';
            document.body.style.transition = 'opacity 0.5s ease-in-out';
            setTimeout(() => {
                document.body.style.opacity = '1';
            }, 100);
        });
    </script>

</body>
</html>
